<template>
  <!-- 通知FormItem做校验 -->
  <div class="my-input-container">
    <textarea
      class="my-textarea"
      :type="type"
      :value="value"
      @blur="onBlur"
      @input="onInput"
      :placeholder="placeholder" 
      v-textareaPlaceholder
    ></textarea>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "text"
    },
    value: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "text"
    }
  },
  methods: {
    onInput(e) {
      // 通知父组件发生了input
      this.$emit("input", e.target.value);
      // 通知FormItem校验
      if (this.$parent.$props.useInput) {
        this.$parent.$emit("validate");
      }
    },
    onBlur() {
      this.$parent.$emit("validate");
    }
  }
};
</script>

<style scoped>
.my-textarea {
  resize: none;
  outline: none;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0.25rem;
  font-size: 0.24rem;
  color: #666666;
  display: block;
}
</style>